<template>
  <div id="id.main.item" class="main.item">
  <mu-card>
      <div @click="handeHeadClick">
        <mu-card-header  :title="userName" :subTitle="mobile" >
          <mu-avatar :src="IconAvatar" slot="avatar"/>
        </mu-card-header>
      </div>
        <div  @click="handeDetailClick">
        <mu-card-text >
          {{comment.feed}}
        </mu-card-text>
        </div>
  </mu-card>
  </div>
</template>

<script>
import iconAvatar from '@/assets/img/uicon.jpg';

export default {
  name: 'mainIndexItem',
  data() {
    return {
      IconAvatar: iconAvatar,
    };
  },
  computed: {
    userName() {
      return `姓名:${this.comment.name}`;
    },
    mobile() {
      return `号码:${this.comment.mobile}`;
    },
  },
  // props: ['comment'],
  props: {
    comment: {
      type: Object,
    },
  },
  methods: {
    handeHeadClick() {
      // 字符串拼接
      this.$router.push(`/profile/${this.comment.mobile}`);
    },
    handeDetailClick() {
      this.$router.push({ path: `/comment/${this.comment.id}` });
    },
  },
};
</script>

<style scoped>

.mu-card-header{
	text-align:left;
}
.mu-card-text{
   text-align:left;
   line-height:1rem;
   height:2rem;
   overflow:hidden;
   padding-top:0rem;
}
.mu-card{
  margin:0.5rem;
  padding-bottom:0.5rem;
}
#id.main.item{
  display: -webkit-flex; /* Safari */
  display: flex;
}
</style>
